<template>
  <div class="wheel-box">
    <div :class="ctrlrotate">
      <img 
        v-for="item in imglist" 
        :key="item.id"
        :class="[item.name,ctrlimg]" 
        :src="item.src" :alt="item.name"
        @click = "show()"
        @mouseleave= "goon" />
    </div>
    <span class="bk"></span>
    <span class="bksmall"></span>
    
    <dl class="mytitle">
      <dt></dt>
      <dd>
        <h1></h1>
        <span></span>
      </dd>
    </dl>
    <!-- <button ref="fa" @click="fast" class="b1pos fast-btn">Fast</button>
    <button ref="sl" @click="slow" class="b1pos slow-btn">Slow</button> -->
  </div>
</template>

<script>
import styles from '../styles/common.scss';
export default {
  name: "WindMills",
  data() {
    return {
      imglist:[
          {id:1,name:'boy',src:require('../images/boy.png'),content:'男孩是个好宝宝！'},
          {id:2,name:'dog',src:require('../images/dog.png'),content:'狗子你是最棒的~'},
          {id:3,name:'girl',src:require('../images/girl.png'),content:'要的就是个女孩'},
          {id:4,name:'girls',src:require('../images/girls.png'),content:'要就要一群女孩'},
          {id:5,name:'hairboy',src:require('../images/hairboy.png'),content:'帅气的男孩都有一手长发'},
          {id:6,name:'mimi',src:require('../images/mimi.png'),content:'小宝宝最可爱'},
          {id:7,name:'mudog',src:require('../images/mudog.png'),content:'好狗不挡道'},
          {id:8,name:'shamegirl',src:require('../images/shamegirl.png'),content:'害羞的小女生运气总不会太差'},
      ],
      time:styles.time,
      ctrlrotate:{wheel:true,paused:false,play:false},
      ctrlimg:{ani2:true}
    };
  },
  methods: {
    show(){
      console.log("我点击了");
      this.ctrlrotate.paused =true;
    },
    goon(){
      // console.log("我移出了");
      
    },
  }
};
</script>

<style scoped lang="scss">
@import '../styles/common.scss';
</style>